<template>
  <div class="banner-navigation" v-show="showNavigation">
    <li class="banner-dropdown">
      <img class="banner-dropdown-sanxian" src="\src\assets\images\nav-img\logo.png" />
      <div class="dropdown1">
        <button class="dropdown1-btn">
          <img class="dropdown1-img" src="\src\assets\images\nav-img\列表_list-top.png" />
          &nbsp;&nbsp;选科
        </button>

        <ul class="dropdown1-content">
          <li><router-link to="#">语 &nbsp;文</router-link></li>
          <li><router-link to="#">数 &nbsp;学</router-link></li>
          <li><router-link to="/subject/english">英 &nbsp;语</router-link></li>
          <li><router-link to="#">政 &nbsp;治</router-link></li>
          <li><router-link to="#">信 &nbsp;息</router-link></li>
        </ul>
      </div>
      <!-- 搜索栏 -->
      <div class="banner-dropdown-search">
        <img src="\src\assets\images\nav-img\搜索_search.png" alt="" />
        <input type="text" placeholder="请输入关键字，点击搜索" />
      </div>
      <!-- 最右侧图标 -->
      <div class="banner-dropdown-img">
        <div class="banner-dropdown-ring">
          <!-- <a class="custom-link" @click.prevent="$emit('jump-to-page', '/auth')">
            登录
          </a> -->
          <router-link class="custom-link" to="/auth" target="_blank">登录</router-link>
        </div>
        <div class="banner-dropdown-img-tag">
          <router-link to="#">
            <img src="/src/assets/images/nav-img/首页_home.png" alt="" />
          </router-link>
        </div>
        <div class="banner-dropdown-img-tag">
          <router-link to="#" target="_blank">
            <img src="/src/assets/images/nav-img/我的_me.png" alt="" />
          </router-link>
        </div>
      </div>
    </li>
  </div>
  <router-view></router-view>
</template>

<script setup>
import { ref, watch, computed } from "vue";
import { useRoute } from "vue-router";

const route = useRoute();
const pathsWithoutNavigation = ["/auth"];
const showNavigation = computed(() => !pathsWithoutNavigation.includes(route.path));
</script>

<style lang="scss" scoped>
@use "./nav.css";

a {
  cursor: pointer;
}
</style>
